<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-input v-model="roleNames.roleName" placeholder="角色名称" />
      </el-form-item>

      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
      <el-button @click="resetSearch">清空</el-button>
    </el-form>

    <div style="margin: 20px 0">
      <el-button type="primary" @click="addRole">添加</el-button>
      <el-button type="danger" @click="removeRoles" :disabled="selectedRoles.length === 0">批量删除</el-button>
    </div>

    <el-table border stripe style="width: 960px" v-loading="listLoading" :data="roles" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" />

      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column label="角色名称">
        <template v-slot="{row}">
          <template v-if="row.edit">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button class="cancel-btn" size="small" :icon="Refresh" type="warning" @click="cancelEdit(row)">
              取消
            </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center">
        <template v-slot="{row}">
          <el-button size="small" type="info" :icon="InfoFilled" title="分配权限" @click="$router.push(`/acl/role/auth?id=${row.id}&roleName=${row.roleName}`)" />

          <el-button size="small" type="primary" :icon="Check" title="确定" @click="updateRole(row)" />
          <el-button size="small" type="primary" :icon="Edit" title="修改角色" @click="row.edit= true" />
          <el-button size="small" type="danger" :icon="Delete" title="删除角色" @click="removeRole(row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30]" style="padding: 20px 0;" layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getRoles" @size-change="getRoles(1, $event)" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'Role'
}
</script>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElMessage,
  ElMessageBox
} from 'element-plus'
import {
  Search,
  Edit,
  Delete,
  Refresh,
  InfoFilled,
  Check
} from '@element-plus/icons-vue'
import type { RoleListModel, RoleModel } from '@/api/acl/model/roleModel'
import {
  updateRoleApi,
  removeRoleApi,
  getRoleListApi,
  saveRoleApi,
  removeRolesApi
} from '@/api/acl/role'

const listLoading = ref(false) // 数据是否正在加载
const roles = ref<RoleListModel>([]) // 角色列表
const total = ref(0) // 总记录数
const page = ref(1) // 当前页码
const limit = ref(5) // 每页记录数
const roleNames = reactive({
  // 用户搜索的用户名
  roleName: '',
  searchRoleName: ''
})
const selectedRoles = ref<RoleListModel>([]) // 所有选中的角色列表

onMounted(() => {
  getRoles()
})

/* 
  取消修改
  */
const cancelEdit = (role: RoleModel) => {
  role.roleName = role.originRoleName as string
  role.edit = false
  ElMessage.warning('取消角色修改')
}

/* 
  更新角色
  */
const updateRole = (role: RoleModel) => {
  updateRoleApi(role).then(() => {
    ElMessage.success('更新角色成功!')
    getRoles()
  })
}

/* 
  添加角色
  */
const addRole = () => {
  // 显示添加界面
  ElMessageBox.prompt('请输入新名称', '添加角色', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(({ value }) => {
      saveRoleApi({ roleName: value }).then(() => {
        ElMessage.success('添加角色成功')
        getRoles()
      })
    })
    .catch(() => {
      ElMessage.warning('取消添加')
    })
}

/* 
  异步获取角色分页列表
  */
const getRoles = (p = page.value, size = limit.value) => {
  page.value = p
  limit.value = size
  listLoading.value = true
  getRoleListApi(p, size, roleNames.searchRoleName)
    .then((result) => {
      roles.value = result.items.map((item) => {
        item.edit = false // 用于标识是否显示编辑输入框的属性
        item.originRoleName = item.roleName // 缓存角色名称, 用于取消
        return item
      })
      total.value = result.total
    })
    .finally(() => {
      listLoading.value = false
    })
}

/* 
  根据搜索条件进行搜索
  */
const search = () => {
  roleNames.searchRoleName = roleNames.roleName
  getRoles()
}

/* 
  重置查询表单搜索列表
  */
const resetSearch = () => {
  roleNames.roleName = ''
  roleNames.searchRoleName = ''
  getRoles()
}

/* 
  删除指定的角色
  */
const removeRole = (role: RoleModel) => {
  ElMessageBox.confirm(`确定删除 '${role.roleName}' 吗?`, '提示', {
    type: 'warning'
  })
    .then(async () => {
      await removeRoleApi(role.id as string)
      getRoles(roles.value.length === 1 ? page.value - 1 : page.value)
      ElMessage.success('删除成功!')
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

/* 
  当表格复选框选项发生变化的时候触发
  */
const handleSelectionChange = (selection: RoleListModel) => {
  selectedRoles.value = selection
}

/* 
  批量删除
  */
const removeRoles = () => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    type: 'warning'
  })
    .then(async () => {
      const ids = selectedRoles.value.map((role) => role.id as string)
      await removeRolesApi(ids)
      getRoles()
      ElMessage({
        type: 'success',
        message: '批量删除成功!'
      })
    })
    .catch((error) => {
      if (error === 'cancel') {
        ElMessage({
          type: 'info',
          message: '已取消删除'
        })
      }
    })
}
</script>
